<template>
  <div class="graph-kpi-single-wrap" :style="layoutStyle">
    <div
      class="kpi-single-svg-wrap"
      v-if="iconConfig.show"
      :style="iconBackgroundStyle"
    >
      <div class="kpi-single-svg-inside-wrap" :style="iconStyle">
        <svg aria-hidden="true" class="icon" v-if="iconConfig.type === 'svg'">
          <use :xlink:href="`#${iconConfig.content}`"></use>
        </svg>
        <i
          v-if="iconConfig.type === 'icon'"
          :class="['iconfont', iconConfig.content]"
          :style="iconStyle"
        ></i>
      </div>
    </div>
    <div class="kpi-single-content-wrap" :style="contentLayoutStyle">
      <div class="content-label" :style="labelStyle">
        <div
          class="content-label-list"
          v-for="(item, index) in config.kpi.reserve
            ? kpiData.value
            : kpiData.label"
        >
          <span
            v-if="index !== 0 && config.label.delimiter"
            class="delimiter"
            >{{ config.label.delimiter }}</span
          >
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="content-delimiter" :style="delimiterStyle">
        <span v-if="kpiConfig.delimiter">{{ kpiConfig.delimiter }}</span>
      </div>
      <div class="content-label" :style="valueStyle">
        <div
          class="content-label-list"
          v-for="(item, index) in config.kpi.reserve
            ? kpiData.label
            : kpiData.value"
        >
          <span
            v-if="index !== 0 && config.value.delimiter"
            class="delimiter"
            >{{ config.value.delimiter }}</span
          >
          <span>{{ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatNumber } from "@/utils/util";
export default {
  name: "KpiSingle",
  props: {
    option: {
      type: Object,
      default: () => ({
        tableField: [
          /*
            {
              key: '',
              fieldName: '',
              fieldDescribe: ''
            }
          */
        ],
        tableData: [],
        config: {},
        style: {},
      }),
    },
  },
  data() {
    return {
      defaultConfig: {
        kpi: {
          delimiter: "", // 分割符
          reserve: false,
        },
        icon: {
          show: true,
          size: 24,
          backgroundSize: 48,
          position: 16,
          type: "svg",
          content: "tuominziyuan",
        },
        label: {
          position: "4px",
          height: 24,
        },
        value: {
          height: 20,
        },
      },
      defaultStyle: {
        layout: {
          flexDirection: "row",
          justifyContent: "flex-start",
          alignItems: "flex-start",
        },
        contentLayout: {
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "flex-start",
        },
        iconBackground: {
          backgroundColor: "#fff",
        },
        icon: {},
        label: {
          color: "#303133",
          fontSize: "24px",
        },
        value: {
          color: "#606266",
          fontSize: "24px",
        },
      },
    };
  },
  computed: {
    tableData: function () {
      let tableData = this.option?.tableData;
      if (tableData && tableData instanceof Array && tableData.length) {
        return tableData[0];
      } else {
        return {};
      }
    },
    kpiData: function () {
      let data = {
        label: [],
        value: [],
      };
      let tableField = this.option?.tableField;

      if (tableField && tableField instanceof Array && tableField.length) {
        tableField.forEach((item) => {
          data.label.push(item.fieldDescribe);

          if (this.tableData.hasOwnProperty(item.fieldName)) {
            data.value.push(
              this.tableData[item.fieldName] === undefined
                ? ""
                : this.tableData[item.fieldName]
            );
          }
        });
        // console.log(field);
      }

      if (this.kpiConfig.thousands) {
        let dataValue = data.value.reduce((r, c) => {
          r.push(formatNumber(c));
          return r;
        }, []);

        data.value = dataValue;
      }
      return data;
    },
    // 配置项
    config: function () {
      // console.log(this.option?.config);
      return this.option?.config || this.defaultConfig;
      // return this.defaultConfig
    },
    // 样式配置
    style: function () {
      return this.option?.style || this.defaultStyle;
      // return this.defaultStyle
    },
    // icon 配置项
    iconConfig: function () {
      return this.config.icon;
    },
    kpiConfig: function () {
      return this.config.kpi;
    },
    iconStyle: function () {
      let size = this.iconConfig.size;
      return {
        ...this.style.icon,
        fontSize: `${size}px`,
        width: `${size}px`,
        height: `${size}px`,
      };
    },
    iconBackgroundStyle: function () {
      let size = this.iconConfig.backgroundSize;
      return {
        ...this.style.iconBackground,
        marginRight: `${this.iconConfig.position}px`,
        width: `${size}px`,
        height: `${size}px`,
      };
    },
    labelStyle: function () {
      return {
        ...this.style.label,
        height: this.config.label.height + "px",
        lineHeight: this.config.label.height + "px",
      };
    },
    delimiterStyle: function () {
      let style = {
        ...this.style.label,
      };

      if (this.style.contentLayout.flexDirection === "row") {
        style.width = this.config.label.position;
        style.height = "100%";
      }

      if (this.style.contentLayout.flexDirection === "column") {
        style.height = this.config.label.position;
        style.width = "100%";
      }

      return style;
    },
    valueStyle: function () {
      return {
        ...this.style.value,
        height: this.config.value.height + "px",
        lineHeight: this.config.value.height + "px",
      };
    },
    layoutStyle: function () {
      return this.style.layout;
    },
    contentLayoutStyle: function () {
      return this.style.contentLayout;
    },
  },

  mounted() {},
};
</script>

<style scoped lang="scss">
.graph-kpi-single-wrap {
  width: 100%;
  height: 100%;
  display: flex;

  .kpi-single-svg-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 1 auto;

    .kpi-single-svg-inside-wrap {
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  .kpi-single-content-wrap {
    display: flex;
    flex: 1 1 auto;

    .content-label {
      display: flex;
      align-items: center;
      .content-label-list {
        // display: flex;
        // align-items: center;

        .delimiter {
          margin: 0 8px;
        }
      }
    }

    .content-delimiter {
      display: flex;
      align-items: center;
    }
  }
}
</style>
